<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/user' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/task' }">工作台</el-breadcrumb-item>
      <el-breadcrumb-item>日程安排</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-tabs @tab-click="handleClick" type="border-card" :default-sort="{prop: 'startTime', order: 'descending'}">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i> 所有日程</span>
          <el-row :gutter="20">
            <el-col :span="9">
              <!-- 3.定义搜索框 -->
              <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getAllTodoList">
                <el-button slot="append" icon="el-icon-search" @click="getAllTodoList"></el-button>
              </el-input>
            </el-col>
          </el-row>
          <el-table :data="allTodoList" border stripe :row-class-name="tableRowClassName" style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="empId" label="员工编号" width="150"></el-table-column>
            <el-table-column prop="todoName" label="事项名称" width="150"></el-table-column>
            <el-table-column prop="todoInfo" label="事项详情" width="400"></el-table-column>
            <el-table-column prop="todoStatus" label="状态" width="200" sortable>
              <template slot-scope="scope">
                <el-switch v-model="scope.row.todoStatus" @change="updateStatus(scope.row)"
                           active-text="已结束" inactive-text="正在进行" active-color="#13ce66">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始日期" :formatter="dateFormat" width="120"
                             sortable></el-table-column>
            <el-table-column prop="endTime" label="结束日期" :formatter="dateFormat" width="120" sortable></el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button type="primary" icon="el-icon-edit" size="small" @click="updateTodoBtn(scope.row)">编辑
                  </el-button>
                  <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteTodo(scope.row)">删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 20, 40]" :page-size="queryInfo.pageSize"
                         layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-tab-pane>

        <!--进行中日程-->
        <el-tab-pane label="正在进行">
          <el-row :gutter="20">
            <el-col :span="9">
              <!-- 3.定义搜索框 -->
              <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getForTodoList">
                <el-button slot="append" icon="el-icon-search" @click="getForTodoList"></el-button>
              </el-input>
            </el-col>
          </el-row>
          <el-table :data="goingTodoList" border stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="empId" label="员工编号" width="150"></el-table-column>
            <el-table-column prop="todoName" label="事项名称" width="150"></el-table-column>
            <el-table-column prop="todoInfo" label="事项详情" width="400"></el-table-column>
            <el-table-column prop="todoStatus" label="状态" width="200">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.todoStatus" @change="updateStatus(scope.row)"
                           active-text="已结束" inactive-text="正在进行" active-color="#13ce66">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始日期" :formatter="dateFormat" width="120"
                             sortable></el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button type="primary" icon="el-icon-edit" size="small" @click="updateTodoBtn(scope.row)">编辑
                  </el-button>
                  <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteTodo(scope.row)">删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 20, 40]" :page-size="queryInfo.pageSize"
                         layout="total, sizes, prev, pager, next, jumper" :total="total1">
          </el-pagination>
        </el-tab-pane>

        <!--已完成日程-->
        <el-tab-pane label="已结束" tab-click="getEndTodoList">
          <el-row :gutter="20">
            <el-col :span="9">
              <!-- 3.定义搜索框 -->
              <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getEndTodoList">
                <el-button slot="append" icon="el-icon-search" @click="getEndTodoList"></el-button>
              </el-input>
            </el-col>
          </el-row>
          <el-table :data="endTodoList" border stripe style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="empId" label="员工编号" width="150"></el-table-column>
            <el-table-column prop="todoName" label="事项名称" width="150"></el-table-column>
            <el-table-column prop="todoInfo" label="事项详情" width="400"></el-table-column>
            <el-table-column prop="todoStatus" label="状态" width="200">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.todoStatus" @change="updateStatus(scope.row)"
                           active-text="已结束" inactive-text="正在进行" active-color="#13ce66">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始日期" :formatter="dateFormat" width="120"
                             sortable></el-table-column>
            <el-table-column prop="endTime" label="结束日期" :formatter="dateFormat" width="120" sortable></el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button type="primary" icon="el-icon-edit" size="small" @click="updateTodoBtn(scope.row)">编辑
                  </el-button>
                  <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteTodo(scope.row)">删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="queryInfo.pageNum" :page-sizes="[5, 10, 20, 40]" :page-size="queryInfo.pageSize"
                         layout="total, sizes, prev, pager, next, jumper" :total="total2">
          </el-pagination>
        </el-tab-pane>

        <!--更新日程信息-->
        <el-dialog title="更新日程信息" :visible.sync="dialogFormVisibleAll" center>
          <el-form :model="updateAllTodoForm">
            <el-form-item label="员工编号" :label-width="formLabelWidth">
              <el-input v-model="updateAllTodoForm.empId" autocomplete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="日程名称" :label-width="formLabelWidth">
              <el-input v-model="updateAllTodoForm.todoName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="日程详情" :label-width="formLabelWidth">
              <el-input type="textarea" autosize placeholder="请输入内容" v-model="updateAllTodoForm.todoInfo">
              </el-input>
            </el-form-item>
            <el-form-item label="开始日期" :label-width="formLabelWidth">
              <el-date-picker v-model="updateAllTodoForm.startTime" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" :label-width="formLabelWidth">
              <el-date-picker v-model="updateAllTodoForm.endTime" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleAll = false">取 消</el-button>
            <el-button type="primary" @click="updateTodoInfo">确 定</el-button>
          </div>
        </el-dialog>

        <!--新建日程-->
        <el-tab-pane>
          <span slot="label"><i class="el-icon-s-order"></i> 新建日程 </span>
          <el-form label-width="80px" :model="newTodoForm" ref="addTodoRef">
            <el-form-item label="事项名称">
              <el-input v-model="newTodoForm.todoName"></el-input>
            </el-form-item>
            <el-form-item label="事项详情">
              <el-input v-model="newTodoForm.todoInfo"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addTodo()">提交</el-button>
              <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      activeName: 'all',
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10,
        empId: ''
      },
      total: 0,
      total1: 0,
      total2: 0,
      newTodoForm: {},
      allTodoList: [],
      goingTodoList: [],
      endTodoList: [],
      dialogFormVisibleAll: false,
      formLabelWidth: '120px',
      updateAllTodoForm: {}
    }
  },
  methods: {
    // 选择标签
    handleClick(tab, event) {
      if (tab.index == 1) {
        this.getForTodoList();
      } else if (tab.index == 2) {
        this.getEndTodoList()
      }
    },
    tableRowClassName({row, rowIndex}) {
      if (row.todoStatus === false) {
        return 'warning-row';
      } else {
        return 'success-row';
      }
    },

    handleSizeChange(pageSize) {
      this.queryInfo.pageSize = pageSize
      this.getAllTodoList()
    },
    handleCurrentChange(pageNum) {
      this.queryInfo.pageNum = pageNum
      this.getAllTodoList()
    },

    dateFormat: function (row, column) {
      const date = row[column.property];
      if (date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },

    async getAllTodoList() {
      const {data: res} = await this.$http.get("user/todo/getAllTodoList", {
        params: this.queryInfo
      }).catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) return this.$message.error("查询失败")
      this.allTodoList = res.data.rows
      this.total = res.data.total
    },

    async getForTodoList() {
      const {data: res} = await this.$http.get("/user/todo/getForTodoList",
        {params: this.queryInfo}).catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) return this.$message.error("查询失败")
      this.goingTodoList = res.data.rows
      this.total1 = res.data.total
    },

    async getEndTodoList() {
      const {data: res} = await this.$http.get("/user/todo/getEndTodoList",
        {params: this.queryInfo}).catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) return this.$message.error("查询失败")
      this.endTodoList = res.data.rows
      this.total2 = res.data.total
    },

    async addTodo() {
      this.newTodoForm.empId = this.$cookies.get("empId")
      const {data: res} = await this.$http.post("user/todo/addTodo", this.newTodoForm).catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) return this.$message.error("新增失败")
      this.resetForm();
      this.$message.success("新增成功")
      await this.getAllTodoList()
    },
    resetForm() {
      this.newTodoForm = {}
    },

    async updateStatus(todo) {
      const {data: result} = await this.$http.put("user/todo/updateTodoStatus", todo).catch(
        function (e) {
          alert(e)
        })
      if (result.status !== 200) return this.$message.error("更新状态失败")
      this.$message.success("成功更新状态")
      await this.getAllTodoList()
      await this.getForTodoList()
      await this.getEndTodoList()
    },

    async updateTodoBtn(todo) {
      const {data: res} = await this.$http.get("user/todo/getTodoInfo?id=" +
        todo.id).catch(function (e) {
        alert(e)
      })
      if (res.status !== 200) return this.$message.error("查询失败")
      this.updateAllTodoForm = res.data
      this.dialogFormVisibleAll = true
    },
    async updateTodoInfo() {
      const {data: res} = await this.$http.put("/user/todo/updateTodoInfo",
        this.updateAllTodoForm).catch(function (e) {
        alert(e)
      })
      if (res.status !== 200) return this.$message.error(res.data)
      this.$message.success(res.data)
      await this.getAllTodoList()
      await this.getEndTodoList()
      await this.getForTodoList()
      this.dialogFormVisibleAll = false
    },

    async deleteTodo(todo) {
      const result = await this.$confirm('此操作将永久删除事项 ' + todo.todoName + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error => error)

      if (result !== 'confirm') {
        return this.$message.info('删除取消')
      }
      const {data: res} = await this.$http.delete(`/user/todo/deleteTodo/${todo.id}`).catch(function (e) {
        alert(e)
      })
      if (res.status !== 200) return this.$message.error("删除失败")
      this.$message.success("删除成功")
      await this.getAllTodoList()
      await this.getForTodoList()
      await this.getEndTodoList()
    },
  },
  created() {
    this.queryInfo.empId = this.$cookies.get("empId")
  },
  mounted() {
    this.getAllTodoList();
  }
}
</script>

<style scoped lang="less">
.text {
  font-size: 14px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.item {
  margin-bottom: 18px;
}
</style>
